<!-- 模板 -->
<template>
    <div class="app__body" :class="{'app__body--show': isRunAnimation}">
        <div class="main">
            <div class="main__wuwuwu">
                <img src="../assets/images/fail_bg_wuwuwu.jpg">
            </div>
            <div class="main__tip">
                <div class="main__tip__gift">
                    <img src="../assets/images/fail_gift.png">
                </div>
                <div class="btn">
                    <a href="javascript:;" @click="enterEndPage" class="app-btn app-btn--gift">点击查看神秘大礼（{{ count }}）</a>
                </div>
            </div>
        </div>
    </div>
</template>


<!-- js -->
<script>
    export default{
        data(){
            return{
                // 倒计时三秒
                count: 3,
                isRunAnimation: 0,
                setTime: null
            }
        },
        created(){
            setTimeout(() => {
                this.isRunAnimation = 1;
            }, 10);
        },
        methods: {
            countDown(){
                this.setTime = setTimeout(() => {
                    this.count --;
                    if(this.count <= 0){
                        clearTimeout(this.setTime);

                        if(this.$store.state.ownPrizeInfo.next){
                            this.$router.push({name: 'end', params: {isFirst: this.$route.params.isFirst }, query: {id: this.$store.state.currentActivityInfo.current.id,channel: this.$store.state.userSubscribeInfo.channel, activityId: this.$store.state.userSubscribeInfo.activityId, bind: this.$store.state.userSubscribeInfo.bind, subscribe: this.$store.state.userSubscribeInfo.subscribe, unionid: this.$store.state.userSubscribeInfo.unionid, openid: this.$store.state.userSubscribeInfo.openid }});
                        }else{
                            this.$router.push({name: 'endno', params: { noCurrent: '0', isFirst: this.$route.params.isFirst}, query: {id: this.$store.state.currentActivityInfo.current.id,channel: this.$store.state.userSubscribeInfo.channel, activityId: this.$store.state.userSubscribeInfo.activityId, bind: this.$store.state.userSubscribeInfo.bind, subscribe: this.$store.state.userSubscribeInfo.subscribe, unionid: this.$store.state.userSubscribeInfo.unionid, openid: this.$store.state.userSubscribeInfo.openid }});
                        }
                        return false;
                    }

                    this.countDown();
                }, 1000);
            },
            // 进入结束页面
            enterEndPage(){
                clearTimeout(this.setTime);
                if(this.$store.state.ownPrizeInfo.next){
                    this.$router.push({name: 'end', params: {isFirst: this.$route.params.isFirst }, query:{id: this.$store.state.currentActivityInfo.current.id,channel: this.$store.state.userSubscribeInfo.channel, activityId: this.$store.state.userSubscribeInfo.activityId, bind: this.$store.state.userSubscribeInfo.bind, subscribe: this.$store.state.userSubscribeInfo.subscribe, unionid: this.$store.state.userSubscribeInfo.unionid, openid: this.$store.state.userSubscribeInfo.openid }});
                }else{
                    this.$router.push({name: 'endno', params: { noCurrent: '0', isFirst: this.$route.params.isFirst}, query:{id: this.$store.state.currentActivityInfo.current.id,channel: this.$store.state.userSubscribeInfo.channel, activityId: this.$store.state.userSubscribeInfo.activityId, bind: this.$store.state.userSubscribeInfo.bind, subscribe: this.$store.state.userSubscribeInfo.subscribe, unionid: this.$store.state.userSubscribeInfo.unionid, openid: this.$store.state.userSubscribeInfo.openid }});
                }
            }
        },
        mounted(){
            this.$aui.loading.hide();
            
            setTimeout(() => {
                this.countDown();
            }, 1000);
        }
    }
</script>

<!-- scss -->
<style scoped lang="scss">
    @import "../styles/common/config.scss";
    .app__body {
        @include absWin;
        background-color: #2683e5;
    }
    .main{
        @include absWin;
        @include flexbox;
        @include flexboxVertical;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        @at-root &__wuwuwu{
            width: 100%;
            height: 6.8rem;
            img{
                display: block;
                width: 100%;
            }
        }
        @at-root &__tip{
            width: 100%;
            @include flexAuto;
            background: url("../assets/images/activity_info_bg.png") 50% 0 no-repeat;
            background-size: 100% auto;
            margin-top: -1.3rem;
            position: relative;
            &__gift{
                width: 6.3rem;
                height: 3.6rem;
                position: relative;
                margin-top: 1.6rem;
                margin-left: auto;
                margin-right: auto;
                >img{
                    display: block;
                    width: 100%;
                }
            }
        }
        .btn{
            padding: 0.5rem 1rem;
        }
    }
</style>
